<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>25CSS3新增属性选择器</title>
    <style>
        input[value] {
            color: tomato;
        }
        /* 利用属性=值来选择某些元素，重点掌握 */
        
        input[type="tel"] {
            color: violet;
        }
        /* 选择div，具有class属性且是icon开头的元素 */
        
        div[class^=icon] {
            color: red
        }
        /* 选择section，具有class属性且是data结尾的元素 */
        
        section[class$=data] {
            color: rgb(223, 17, 130);
        }
        /* 选择class属性值中含有item的元素 */
        
        article[class*=item] {
            color: yellowgreen;
        }
    </style>
</head>

<body>
    <!-- 利用属性选择器，可以不借助类或者id选择器 -->
    <input type="text" value="第一个input">
    <input type="text">
    <!-- 利用属性=值来选择某些元素，重点掌握 -->
    <input type="tel" name="" placeholder="请输入手机号">
    <input type="password" name="">
    <!-- 选择属性值开头的某些元素 -->
    <div class="icon1">选择属性值icon开头的元素</div>
    <div class="icon2">选择属性值icon开头的元素</div>
    <div class="icon3">选择属性值icon开头的元素</div>
    <div class="data">选择属性值icon开头的元素</div>
    <!-- 选择属性值结尾的某些元素 -->
    <section class="icon1-data">选择属性值data结尾的元素</section>
    <section class="icon2-data">选择属性值data结尾的元素</section>
    <section class="icon2">c</section>
    <!-- 选择属性值中含有的元素 -->
    <article class="icon-item">选择属性值中含有item的元素</article>
    <article class="icon-data">选择属性值中含有item的元素</article>
    <article class="icon-item-data">选择属性值中含有item的元素</article>
</body>

</html>